<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <div id="app">
      <h3>{{title}}</h3>
      <input type="text" @keydown.enter="add" ref="ipt" /><button @click="search">搜索</button>
      <br>
      <input type="checkbox" :checked="allFlag" @change="setAllFlag">全选
      <ul>
        <li v-for="(val,idx) in searchList" :key="val.id">
          <input type="checkbox" :checked="val.flag" @change="setFlag(idx,$event)">
          <span>
            <span @click="isShow(idx)" v-if="val.update">{{val.title}}</span>
            <input @click.stop="" @blur="update(idx,$event)" v-else type="text" v-model="val.title">
          </span>
          <button @click="del(idx)">X</button>
        </li>
      </ul>
    </div>
	</body>
  <script src="../vue.js"></script>
  <script>
    
    const vm = new Vue({
      el:"#app",
      data:{
        title:"待办事项",
        list:[{   // 总的数据列表，没有参与渲染，但影响了渲染数据
          id:0,   // 每个待办事项的唯一的值
          title:"学IT，来千锋",  // 内容
          flag:true,    // 是否选中
          update:true   // 是否被修改：true没有被修改，false正在被修改
        }],
        searchList:[{   // 要渲染的数据列表（搜索之后的数据列表）
          id:0,
          title:"学IT，来千锋",
          flag:true,
          update:true
        }],
        index:0
      },
      methods:{
        add(e){
          // 添加功能：添加数据
          this.list.push({
            id:++this.index,
            title:e.target.value,
            flag:false,
            update:true
          })
          // 将list同步到渲染数据
          this.searchList = this.list
          // 清空输入框
          e.target.value = ""
        },
        setFlag(i, e){
          // 修改单个列表的选中状态
          this.list[i].flag = e.target.checked
          // 将list同步到渲染数据
          this.searchList = this.list
        },
        setAllFlag(e){
          // 修改全选状态
          this.list.forEach(val=>{
            val.flag = e.target.checked
          })
          // 将list同步到渲染数据
          this.searchList = this.list
        },
        search(){
          // 根据搜索关键字，过滤数据
          // 将过滤出的结果，直接存入渲染数据
          this.searchList = this.list.filter(val=>{
            if(val.title.includes(this.$refs.ipt.value)){
              return val
            }
          })
        },
        del(i){
          // 删除数据
          this.list.splice(i, 1)
          // 同步数据
          this.searchList = this.list
        },
        update(i, e){
          // 更新 修改之后的数据
          this.list[i].title = e.target.value
          // 更新 是否修改 状态
          this.list[i].update = !this.list[i].update
          // 同步数据
          this.searchList = this.list
        },
        isShow(i){
          // 更新 是否修改 状态
          this.list[i].update = !this.list[i].update;
          // 同步数据
          this.searchList = this.list
          // 将更新之后的状态返回,方便if判断
          return this.searchList[i].update
        }
      },
      computed:{
        allFlag(){
          // 计算全选状态
          return this.list.every(val=>val.flag)
          // return this.list.every((val)=>{
          //   return val.flag
          // })
          
          // ()=>{}
          // 有且只有一个参数
          // 有且直接返回值
          // =>
        }
      }
    })
  </script>
</html>
